<template>
  <view class="newCar">
    <view class="search-box-wrapper" @click="onClickSearch">
      <view class="search-box">
        <view class="iconfont iconsousuo"></view>
        <text class="text">搜索品牌/车型/指导价/配件</text>
      </view>
    </view>
    
    <view class="menu-tab"></view>
    <view class="menu-empty" v-show="menuFixed&&screeningCriteria.length > 0" style="height:174rpx"></view>
    <view class="menu-empty" v-show="menuFixed&&screeningCriteria.length == 0" style="height:76rpx"></view>
    <view :class="{'fixed': menuFixed}" :style="{'top': navbarHeight + 'px'}">
      <view class="menu">
        <view class="item" @click="onChangeDistance">
          <text class="text">距离</text>
          <view class="icon-arrow">
            <u-icon name="arrow-up-fill" size="14" :color="query.DistancesSort === 0 ? '#FBD321' : '#c0c4cc'" margin-top="0"></u-icon>
            <u-icon name="arrow-down-fill" size="14" :color="query.DistancesSort === 1 ? '#FBD321' : '#c0c4cc'" margin-top="0"></u-icon>
          </view>
        </view>
        <view class="item" :class="downStatus ? 'down-open':'down-close'">
          <u-dropdown ref="uDropdown" menu-icon-size="14" active-color="#FBD321" @open="downStatus = true" @close="downStatus = false">
            <u-dropdown-item v-model="query.store_type" title="筛选" :options="options1" @change="storeTypeChange"></u-dropdown-item>
          </u-dropdown>
        </view>
      </view>
      
      <!-- 筛选条件 -->
      <view class="condition" v-if="screeningCriteria.length > 0">
        <view class="condition-list">
          <scroll-view class="scroll-view" scroll-x>
            <view class="condition-item" v-for="(item, index) in screeningCriteria" :key="index">
              <text>{{item.name}}</text>
              <text class="iconfont iconguanbi" @click="onClickDelScreeningCriteria(item, index)"></text>
            </view>
          </scroll-view>
        </view>
        <view class="btn-reset" @click="onClickReset">
          <text class="iconfont iconzhongzhi"></text>
          <text class="text">重置</text>
        </view>
      </view>
    </view>
    
    <view class="list">
      <view class="flex flex-jc-c u-m-20" v-if="loading && query.pageIndex === 1"><u-loading mode="circle"></u-loading></view>
      <block v-for="(item, index) in result" :key="index">
        <new-car-store-item :item="item" />
      </block>
      
      <view style="height: 30vh;" v-if="result.length <= 0 && isEnd">
        <u-empty mode="list"></u-empty>
      </view>
      
      <view class="flex flex-jc-c u-m-20" v-if="query.pageIndex !== 1">
        <u-loadmore :status="status" />
      </view>
    </view>
  </view>
</template>

<script>
import newCarStoreItem from './newCarStoreItem.vue'
export default {
  components: {
    newCarStoreItem
  },
  props: {
    tabIndex: {
      type:[Number, String],
      default: 0
    }
  },
  watch: {
    tabIndex(newVal, oldVal) {
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 10,
        complete: () => {
          if(newVal === 1) {
            this.menuFixed = false
          }
        }
      })
    },
    lat(newVal, oldVal) {
      if(newVal !== oldVal) {
        this.$commen.getLocation(data => {
          this.query.dlon = data.lon
          this.query.dlat = data.lat
          this.loading = false
          this.getList(true)
        })
      }
    }
  },
  computed:{
    lat() {
      return this.$store.state.lat
    }
  },
  data() {
    return {
      options1: [{
        label: '7迈车旗舰店',
        value: 5,
      },
      {
        label: '7迈车体验店',
        value: 2,
      },
      {
        label: '中心店',
        value: 3,
      },
      {
        label: '4S入驻',
        value: 4,
      }],
      query: {
        distance_sort: '',
        store_type: 10,
        SearchTItle: '',
        dlon: 0,
        dlat: 0,
        pageIndex: 1,
        pageSize: 20
      },
      loading: false,
      isEnd: false,
      status: 'loading',
      result: [],
      downStatus: false,
      menuFixed: false,
      navbarHeight: uni.getSystemInfoSync().statusBarHeight + 44,
      screeningCriteria: []
    }
  },
  created() {
    this.loading = true
    this.$commen.getLocation(data => {
      this.query.dlon = data.lon
      this.query.dlat = data.lat
      this.loading = false
      this.getList()
    })
    uni.$on('storeLoadMore', data => {
      if(data === 0) {
        this.getList()
      }
    })
    
    // 页面滚动条监听
    uni.$on('storePageScroll', data => {
      this.judgeFixed()
    })
  },
  options: { styleIsolation: 'shared' },
  methods: {
    // 判断是否到吸顶
    judgeFixed() {
      uni.createSelectorQuery().in(this).select('.menu-tab').boundingClientRect((data)=> {
        this.menuFixed = data.top <= this.navbarHeight ? true : false
      }).exec()
    },
    /* 
      获取门店列表
      @param {Boolean} isInit 是否初始化query数据
      params: 
    */
    async getList(isInit) {
      if(isInit) {
        let query = {
          distance_sort: '',
          store_type: 10,
          SearchTItle: '',
          pageIndex: 1,
        }
        let oldQuery = this.query
        this.query = {
          ...oldQuery,
          ...query
        }
        this.isEnd = false
        this.loading = false
      }
      if (this.loading || this.isEnd) return false
      this.loading = true
      let params = JSON.parse(JSON.stringify(this.query))
      params.distance_sort = params.distance_sort === 1 ? false : true
      let res = await this.$api.store.GetCarStoreList(params)
      if(res.code === 200) {
        let resultList = isInit || this.query.pageIndex === 1 ? [] : this.result
        let list = res.data.list;
        if (list.length > 0) {
          this.result = resultList.concat(list)
          this.query.pageIndex = this.query.pageIndex + 1
          if(list.length < 20) {
            this.isEnd = true
            this.status = 'nomore'
          }
        } else {
          this.result = resultList.concat(list)
          this.isEnd = true
          this.status = 'nomore'
        }
      }
      this.loading = false
    },
    // 店铺类型筛选
    storeTypeChange(data) {
      for(let i in this.options1) {
        if(this.options1[i].value === data) {
          let sc = this.screeningCriteria;
          for(let i = 0; i < sc.length; i++){
            if(sc[i].type === 1) {
              sc.splice(i, 1);
              break;
            }
          }
          sc.push({
            name: this.options1[i].label,
            type: 1
          });
          this.screeningCriteria = sc;
          this.query.pageIndex = 1;
          this.isEnd = false
          this.status = 'loading'
          this.loading = false
          uni.pageScrollTo({
            scrollTop: 0,
            duration: 100
          });
          this.getList()
          break
        }
      }
    },
    // 点击重置
    onClickReset() {
      this.screeningCriteria = []
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 100
      });
      this.getList(true)
    },
    // 点击距离
    onChangeDistance(){
      if(this.query.distance_sort === '') {
        this.query.distance_sort = 0
      } else if(this.query.distance_sort === 0) {
        this.query.distance_sort = 1
      } else if(this.query.distance_sort === 1) {
        this.query.distance_sort = ''
      }
      let sc = this.screeningCriteria;
      for(let i = 0; i < sc.length; i++){
        if(sc[i].type === 2) {
          sc.splice(i, 1);
          break;
        }
      }
      if(this.query.distance_sort !== '') {
        sc.push({
          name: this.query.distance_sort === 0 ? '距离最近' : '距离最远',
          type: 2
        });
      }
      
      this.query.pageIndex = 1
      this.isEnd = false
      this.status = 'loading'
      this.loading = false
      uni.pageScrollTo({ 
        scrollTop: 0,
        duration: 100
      });
      this.getList()
    },
    // 点击搜索
    onClickSearch() {
      uni.navigateTo({
        url: '/pages_common/pages_index/search/search'
      })
    },
    // 删除筛选条件
    onClickDelScreeningCriteria(data, index) {
      let sc = this.screeningCriteria;
      sc.splice(index, 1);
      this.screeningCriteria = sc;
      if(data.type === 1) {
        this.query.store_type = 10;
      }
      if(data.type === 2) {
        this.query.distance_sort = '';
      }
      this.query.pageIndex = 1
      this.isEnd = false
      this.status = 'loading'
      this.loading = false
      uni.pageScrollTo({ 
        scrollTop: 0,
        duration: 100
      });
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.search-box-wrapper{
  padding: 16rpx 25rpx 0;
  background-color: #fff;
  .search-box{
    height: 60rpx;
    border-radius: 60rpx;
    background-color: #eee;
    display: flex;
    align-items: center;
    padding: 0 32rpx;
    .iconsousuo{
      color: #989898;
      font-size: 32rpx;
    }
    .text{
      color: #999;
      font-size: 26rpx;
      margin-left: 12rpx;
    }
  }
}

.menu{
  display: flex;
  align-items: center;
  background-color: #fff;
  position: relative;
  width: 750rpx;
  .item{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-arrow{
      padding-left: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 0;
    }
    
    // 下拉菜单打开时，给下拉菜单设置高度
    &.down-open {
      & /deep/ .u-dropdown__content {
        height: 100vh !important;
      }
    }
    &.down-close {
      & /deep/ .u-dropdown__content {
        height: 0 !important;
      }
    }
    /deep/ .u-dropdown__content__popup .uni-scroll-view{
      border-radius: 0 0 20rpx 20rpx;
    }
    /deep/ .uicon-arrow-down-fill{
      font-size: 14rpx !important;
    }
    /deep/ .u-border-bottom{
      text-align: center;
      &::after{
        border-bottom: none;
      }
    }
    
    /deep/ .u-cell_title{
      width: 100% !important;
    }
  }
}
.condition{
  display: flex;
  flex-direction: row;
  padding: 24rpx;
  align-items: center;
  .btn-reset{
    color: #999;
    height: 50rpx;
    margin-left: 24rpx;
    display: flex;
    align-items: center;
    .iconfont{
      font-size: 28rpx;
    }
    .text{
      font-size: 26rpx;
      margin-left: 10rpx;
    }
  }
  .condition-list{
    flex: 1;
    overflow: hidden;
    height: 50rpx;
    border-right: 2rpx solid #DBDBDB;
    .scroll-view{
      white-space: nowrap;
      ::-webkit-scrollbar {
      	display: none;  
      	width: 0 !important;  
      	height: 0 !important;
      	-webkit-appearance: none;
      	background: transparent;  
      }
    }
    .condition-item{
      display: inline-block;
      background-color: #ddd;
      border-radius: 10rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      height: 50rpx;
      line-height: 50rpx;
      color: #333;
      margin-right: 20rpx;
      .iconfont{
        font-size: 26rpx;
        margin-left: 14rpx;
      }
    }
  }
}
.list{
  padding-bottom: 20rpx;
}
.fixed{
  position: fixed;
  left: 0;
  background-color: #f6f6f6;
  z-index: 99;
}
.menu-empty{
  height: 174rpx;
}
</style>
